<template>
    <div class="history-hot">
        <div class="his-hot" v-if="isShowHistory">
            <div class="hd">
                <h4>历史记录</h4>
                <van-icon name="delete" @click="clearFn" />
            </div>
            <div class="bd">
                <van-tag
                    v-for="(item, index) in searchHistoryData"
                    :key="index"
                    plain
                    type="default"
                    @click="getData(item)"
                    >{{ item }}</van-tag
                >
            </div>
        </div>

        <div class="his-hot">
            <div class="hd">
                <h4>热门搜索</h4>
            </div>
            <div class="bd">
                <van-tag
                    v-for="item in searchHotData"
                    :key="item.id"
                    plain
                    type="default"
                    @click="getData(item.keyword)"
                    :style="{ color: item.is_hot == 1 ? '#ee0a24' : '' }"
                    >{{ item.keyword }}</van-tag
                >
            </div>
        </div>
    </div>
</template>

<script>
import { Clearhistory } from "../../request/api";

export default {
    data() {
        return {
            isShowHistory: true,
        };
    },
    //接收父组件searchpopup传入的数据
    props: ["searchHistoryData", "searchHotData"],
    methods: {
        //封装的搜索商品函数
        getData(val) {
            this.$emit("fn", val);
        },
        //点击删除的执行函数
        clearFn() {
            Clearhistory().then((res) => {
                console.log(res);
                this.$toast.success("删除成功");
                setTimeout(() => {
                    this.isShowHistory = false;
                }, 1000);
            });
        },
    },
};
</script>
 
<style lang = "less" scoped>
.his-hot {
    margin-bottom: 0.2rem;
    background-color: #fff;
    padding: 2%;
    .hd {
        padding-top: 2%;
        display: flex;
        justify-content: space-between;
        font-size: 0.22rem;
        margin-bottom: 0.1rem;
        h4 {
            font-size: 0.2rem;
        }
    }
    .van-tag {
        padding: 0.04rem;
        margin: 0.05rem 0;
        margin-right: 0.1rem;
    }
}
</style>